<template>
  <div class="box">
    <div class="title"><p>制作人</p></div>
    <!--图形图表的容器-->
    <div class="charts" ref="EchartsVc"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import {EChartsType} from "echarts";

let EchartsVc = ref<any>();

onMounted(() => {
  let mychart: EChartsType = echarts.init(EchartsVc.value);

  let txt = 'By韩朵朵'
  let option = {
    graphic: {
      elements: [
        {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: txt,
            fontSize: 80,
            fontWeight: 'bold',
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: 'transparent',
            stroke: 'yellowgreen',
            lineWidth: 1
          },
          keyframeAnimation: {
            duration: 3000,
            loop: true,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: 'transparent',
                  lineDashOffset: 200,
                  lineDash: [200, 0]
                }
              },
              {
                // Stop for a while.
                percent: 0.8,
                style: {
                  fill: 'transparent'
                }
              },
              {
                percent: 1,
                style: {
                  fill: 'orange'
                }
              }
            ]
          }
        }
      ]
    }
  };
  mychart.setOption(option);
})


</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: rgba(168, 178, 177, 0.35);

  .title {
    margin-top: 20px;
    margin-left: 20px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: calc(100% - 40px);
  }
}

</style>